<template>
  <div id="education" class="education" />
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { geteducation } from '@/api/index'

export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.geteducation()
  },
  methods: {
    async geteducation() {
      const { list1, list2, list3, list4 } = await geteducation()
      this.list = [...list1, ...list2, ...list3, ...list4]
      this.DoughnutChart()
    },
    DoughnutChart() {
      echarts.use([
        TitleComponent,
        TooltipComponent,
        LegendComponent,
        PieChart,
        CanvasRenderer,
        LabelLayout
      ])

      var chartDom = document.getElementById('education')
      var myChart = echarts.init(chartDom)
      var option
      const arr = []
      this.list.forEach(item => {
        arr.push({
          value: item.value,
          name: item.name
        })
      })

      option = {
        title: {
          text: '员工学历比例',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}:{c}人'
        },
        legend: {
          x: 'center',
          y: 'bottom',
          formatter: function(name) {
            const data = option.series[0].data
            // console.log(data, 'data')
            let total = 0
            let tarValue
            for (let i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name === name) {
                tarValue = data[i].value
              }
            }
            // 计算出百分比
            const p = Math.round((tarValue / total) * 100) + '%'
            return `${name} (${p})`
            // name是名称，v是数值
          }
        },
        color: ['#2c9ef7', '#0dd78d', '#feae4d', '#b678fd'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: '60%',
            label: {
            },
            data: arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style>
.education{
    height: 300px;
}
</style>
